<template>
	<view>
		<!-- 豆瓣评分部分 -->
		<view class="container">
			<!-- 上 -->
			<view class="text">
				<text>豆瓣评分TM</text>
				<text class="active">></text>
			</view>
			<!-- 下 -->
			<view class="bothcontainer">
				<!-- 左侧分数 -->
				<view class="leftcontainer">
					<!-- 上方数字 -->
					<text>{{value*2}}</text>
					<!-- 下方星星 -->
					<uni-rate :max="5" :value="value" :size="15" :readonly="true"></uni-rate>
				</view>
				<!-- 右侧 -->
				<view class="pro">
					<view>
						<image :src="src2" mode="widthFix" class="fen"></image>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "pingfencomponent",
		props: {
			value: {
				type: String,
				default: () => {
					return ''
				}
			},
			src2: {
				type: String,
				default: () => {
					return '/static/zhuluo-fen.png'
				}
			}
		},
		data() {
			return {

			};
		}
	}
</script>

<style scoped>
	.text1 {
		font-size: 10;
	}

	.container {
		margin-top: 10px;
		margin-left: 11px;
		height: 313rpx;
		width: 698rpx;
		background-color: white;
		border-radius: 3%;
	}

	.text {
		font-size: 12px;
		font-weight: 500;
		padding: 8px 15px;
		font-weight: 500;
	}

	.text>text.active {
		margin-left: 220px;
	}

	.bothcontainer {
		margin-top: 20px;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}

	.leftcontainer {
		margin-right: 25px;
	}

	.rightcontainer {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		flex-shrink: 0;
		/* 	justify-content: center;
	align-items: center; */
		width: 150px;
		height: 20px;
		border: 1px solid red;
	}

	.bothcontainer>view>text {
		font-size: 25px;
		margin-left: 25px;
	}

	.procontainer {
		width: 80px;
		height: 10px;
		/* border: 1px solid red; */
		margin-bottom: 1.7px;
	}

	.pro {
		margin-left: 10px;
	}

	.star>view {
		display: flex;
		flex-direction: row-reverse;
	}

	.fen {
		width: 200px;
	}
</style>
